import ReactDOM from 'react-dom';

// 全局 state 数组
let state = [];
// 全局 setter 函数数组
let setters = [];
// 当前状态索引
let stateIndex = 0;

// 重新渲染组件 (更新后调用)
function render() {
  // 重置状态索引
  stateIndex = 0;
  // 重新渲染组件 注意：这是简化实现
  ReactDOM.render(<Comp />, document.getElementById('use-root'));
}

// 这里通过闭包 记录 index 值
function createSetter(index) {
  return function(newState) {
    // 更新对应索引的状态值
    state[index] = newState;
    // 触发组件重新渲染
    render();
  };
}

function useState(initialState) {
  // 不存在则使用初始值
  if (!state[stateIndex]) {
    state[stateIndex] = initialState;
    var func = createSetter(stateIndex);
    setters.push(func);
  }

  // 获取当前状态值和对应的 setter 函数
  let value = state[stateIndex];
  let setter = setters[stateIndex];

  // 索引递增，为下一个 useState 调用做准备
  stateIndex++;
  return [value, setter];
}

function Comp() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('张三');
  return (
    <div>
      {count}
      <button onClick={() => setCount(count + 1)}>setCount</button>
      {name}
      <button onClick={() => setName('李四')}>setName</button>
    </div>
  );
}

export default Comp;
